<template>
	<div class="tabs">
		<div class="tabs_box">
			<div class="tabs_box_top">
				<div class="tabs_box_top_nav1">
					<router-link to="/">
						<p>主题游</p>
						<p>个性独特</p>
					</router-link>
				</div>
				<div class="tabs_box_top_nav2" v-for="item in toplist" :key="item.id" :style="'background-image:url('+item.img+')'">
					<router-link to="/">
						<p>{{item.txt}}</p>
					</router-link>
				</div>
			</div>
		</div>
		<div class="tabs_box_bottom">
				<div class="tabs_box_bottom_nva" v-for="item in list" :key="item.id" :style="'background-image:url('+item.img+')'">
					<router-link to="/">
						<p>{{item.txt}}</p>
					</router-link>
				</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Tabs',
		data(){
			return{
				toplist:[
					{id:2,img:'iconimg/6.png',txt:'亲子游'},
					{id:3,img:'iconimg/7.png',txt:'摄影游'},
					{id:4,img:'iconimg/8.png',txt:'户外游'},
					{id:5,img:'iconimg/9.png',txt:'活动赛事'},
					{id:6,img:'iconimg/10.png',txt:'瑜伽行'},
					{id:7,img:'iconimg/11.png',txt:'野奢帮'},
				],
				
				list:[
					{id:1,img:'iconimg/12.png',txt:'定制游'},
					{id:2,img:'iconimg/13.png',txt:'签证'},
					{id:3,img:'iconimg/14.png',txt:'邮轮'},
					{id:4,img:'iconimg/15.png',txt:'美宿度假'}
					
				]
			}
		}
	}
</script>

<style scoped>
	.tabs {
		padding: .3rem .2rem;
		background-color: #fff;
		border-radius: 0 0 .3rem .3rem;
		overflow: hidden;
	}
	a{
		text-decoration: none;
		color: black;
	}
	.tabs_box_top_nav1 {
		width: 25%;
		height: 100%;
		float: left;
		text-align: center;
		background-size: 100% 100%;
		background-image: url(../../../../public/iconimg/5.png);
	}

	.tabs_box_top_nav1 P:nth-child(1) {
		font-size: 0.4rem;
		font-weight: bold;
		color: black;
		line-height: 1.6rem;
	}

	.tabs_box_top_nav1 p:nth-child(2) {
		text-align: center;
		margin: auto;
		font-size: 0.4rem;
		font-weight: bold;
		background-color: gold;
		width: 2rem;
		height: 0.6rem;
		border-radius: 0.8rem;
		line-height: 0.6rem;
	}

	.tabs_box_top_nav2 {
		width: 25%;
		height: 50%;
		background-size: 100% 100%;
		background-image: url(../../../../public/iconimg/6.png);
		float: left;
		
	}
	.tabs_box_top_nav2 p{
		font-size: 0.4rem;
		font-weight: bold;
		color: black;
		text-align: center;
		line-height: 1.5rem;
	}
	.tabs_box_top {
		height: 3rem;
	}
	
	.tabs_box_bottom_nva{
		width: 25%;
		float: left;
		height: 100%;
		background-size: 100% 100%;
	}
	.tabs_box_bottom_nva p{
		font-size: 0.4rem;
		font-weight: bold;
		color: black;
		text-align: center;
		line-height: 1.5rem;
	}
	
</style>
